<template>
  <view class="recent-activity-new">
    <view class="section-header">
      <text class="section-title-new">⏰ 最近活动</text>
      <text class="section-subtitle">活动记录与动态</text>
    </view>
    
    <scroll-view class="activity-scroll-new" scroll-y="true" :style="{ height: scrollHeight }">
      <view class="activity-timeline">
        <view class="timeline-item" v-for="activity in activities" :key="activity.id">
          <view class="timeline-dot"></view>
          <view class="timeline-line"></view>
          <view class="activity-card-new">
            <view class="activity-icon-new">{{ activity.icon }}</view>
            <view class="activity-content">
              <text class="activity-title-new">{{ activity.title }}</text>
              <text class="activity-time-new">{{ activity.time }}</text>
            </view>
            <view class="activity-points-new" v-if="activity.points">
              <text class="points-value" :class="activity.type">
                {{ activity.type === 'earn' ? '+' : '-' }}{{ activity.points }}
              </text>
            </view>
          </view>
        </view>
        
        <!-- 空状态 - 优化版 -->
        <view class="empty-activity-new" v-if="activities.length === 0">
          <view class="empty-illustration">📝</view>
          <text class="empty-text-new">暂无活动记录</text>
          <text class="empty-desc-new">开始使用功能来获得积分吧</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'ActivityTimeline',
  props: {
    activities: {
      type: Array,
      default: () => []
    },
    scrollHeight: {
      type: String,
      default: '400rpx'
    }
  }
}
</script>

<style scoped>
/* ========== 最近活动 - 时间轴样式 ========== */
.recent-activity-new {
  margin-bottom: 28rpx;
}

.section-header {
  margin-bottom: 20rpx;
}

.section-title-new {
  font-size: 30rpx;
  font-weight: bold;
  color: #1f2937;
  display: block;
  margin-bottom: 6rpx;
}

.section-subtitle {
  font-size: 22rpx;
  color: #9ca3af;
  display: block;
}

.activity-scroll-new {
  background: white;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
  padding: 20rpx;
}

.activity-timeline {
  position: relative;
}

.timeline-item {
  position: relative;
  padding-left: 48rpx;
  padding-bottom: 24rpx;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-dot {
  position: absolute;
  left: 0;
  top: 8rpx;
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.4);
  z-index: 2;
  animation: dot-pulse 2s ease-in-out infinite;
}

@keyframes dot-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.4); }
  50% { transform: scale(1.15); box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.6); }
}

.timeline-line {
  position: absolute;
  left: 9rpx;
  top: 28rpx;
  bottom: 0;
  width: 2rpx;
  background: linear-gradient(180deg, #e5e7eb 0%, transparent 100%);
  z-index: 1;
}

.timeline-item:last-child .timeline-line {
  display: none;
}

.activity-card-new {
  display: flex;
  align-items: center;
  gap: 14rpx;
  background: #f9fafb;
  border-radius: 14rpx;
  padding: 14rpx 16rpx;
  transition: all 0.3s ease;
}

.activity-card-new:active {
  background: #f3f4f6;
  transform: scale(0.98);
}

.activity-icon-new {
  font-size: 36rpx;
  filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.1));
}

.activity-content {
  flex: 1;
}

.activity-title-new {
  font-size: 24rpx;
  color: #1f2937;
  font-weight: 500;
  display: block;
  margin-bottom: 4rpx;
}

.activity-time-new {
  font-size: 20rpx;
  color: #9ca3af;
  display: block;
}

.activity-points-new {
  text-align: right;
}

.points-value {
  font-size: 24rpx;
  font-weight: bold;
  padding: 6rpx 12rpx;
  border-radius: 10rpx;
}

.points-value.earn {
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
}

.points-value.spend {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

/* 空状态 - 优化版 */
.empty-activity-new {
  text-align: center;
  padding: 80rpx 20rpx;
}

.empty-illustration {
  font-size: 100rpx;
  display: block;
  margin-bottom: 20rpx;
  opacity: 0.5;
  animation: empty-float 3s ease-in-out infinite;
}

@keyframes empty-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10rpx); }
}

.empty-text-new {
  font-size: 28rpx;
  font-weight: bold;
  color: #6b7280;
  display: block;
  margin-bottom: 10rpx;
}

.empty-desc-new {
  font-size: 24rpx;
  color: #9ca3af;
  display: block;
}
</style>

